<template>
  <header>
    <span @click="$back">
      <van-icon name="arrow-left" color="#fff" size="18" />
    </span>
    <strong>{{ $t("language.home.language") }}</strong>
    <span @click="$openPage('/kefu')"><img src="@/assets/img/kefu.png" alt="" /></span>
  </header>
  <main>
    <Skeleton :loading="loading">
      <template #ske>
        <div style="
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
            padding:0 15px;
          ">
          <div v-for="(item, index) in coutry" :key="index" style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              height: 60px;
            ">
            <van-skeleton-avatar style="width: 36px; height: 36px; margin-right: 15px" />
            <van-skeleton-paragraph style="flex: 1; height: 36px" />
          </div>
        </div>
      </template>
      <template #main>
        <ul>
          <li v-for="(item, index) in coutry" :key="index" @click="changeLanguage(item)">
            <img v-lowlazy="getImg(item.img)" alt="" /><span>{{
      item.name
    }}</span>
          </li>
        </ul>
      </template>
    </Skeleton>
  </main>

  <div class="dialog">
    <el-dialog width="90%" v-model="initVisible2" :show-close="false">
      <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
        <strong></strong>
        <h4>
          {{ $t("language.dialog.title") }}
        </h4>
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div>
      <div class="dialogmain">
        <p class="note">{{ $t("language.dialog.text") }}</p>
        <van-button class="confirm" @click="checkout">{{
      $t("language.dialog.btn")
          }}</van-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import router from "@/router/index.ts";
import { useStore } from "vuex"
const store = useStore()
// const { proxy } = getCurrentInstance();
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
const coutry = reactive([
  {
    img: "guoqi_01.png",
    name: "English",
    lang: "en",
  },
  {
    img: "guoqi_02.png",
    name: "中文(简)",
    lang: "English",
  },
  {
    img: "guoqi_03.png",
    name: "Portugues do Brasil",
    lang: "pt",
  },
  {
    img: "guoqi_04.png",
    name: "Indonesia",
    lang: "id",
  },
  {
    img: "guoqi_05.png",
    name: "日本語",
    lang: "ja",
  },
  {
    img: "guoqi_06.png",
    name: "한국어",
    lang: "ko",
  },
  {
    img: "guoqi_07.png",
    name: "ภาษาไทย",
    lang: "th",
  },
  {
    img: "guoqi_08.png",
    name: "Tiếng Việt",
    lang: "vi",
  },
]);

const { locale } = useI18n();
let lang = reactive({
  img: "",
  name: "",
  lang: "",
},);
//dom更新后执行
nextTick(() => {
  // loading.value = false;
  let time = setInterval(() => {
    loading.value = false;
    clearInterval(time);
  }, 500);
});
const changeLanguage = (item) => {
  for (let key in item) {
    lang[key] = item[key];
  }
 
  initVisible2.value = true;
  
  
};
let loading = ref(true);
let checkout = () => {
  
  locale.value = lang.lang;
  localStorage.setItem('lang', JSON.stringify(lang))
  console.log(lang,localStorage.getItem('lang'),'fd');
  store.commit('SET_LANG', lang)
  initVisible2.value = false
  router.push("/home");
};
let initVisible2 = ref(false);
</script>
<style lang="scss">
.dialog {
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
      margin-right: -7px;
    }
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 10px auto 20px;
    }

    .note {
      font-size: 14px;
      color: #748494;
      line-height: 23px;
      margin-top: 10px;
      text-align: center;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style scoped lang="scss">
header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    line-height: 28px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

main {
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  padding-top: 45px;
  background-color: rgb(26, 26, 26);
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  ul {
    padding: 0px 0px 90px;
    width: 100vw;
    height: 100vh;
    background-color: rgb(26, 26, 26);
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    li {
      width: 100%;
      height: 60px;
      @include flex(row, flex-start, center);
      border-bottom: 1px solid rgb(95, 92, 92);
      padding: 16px 22px;

      img {
        width: 30px;
      }

      span {
        color: #fff;
        font-size: 16px;
        margin-left: 15px;
      }
    }
  }
}
</style>
